<script>
export default {
  name: "BottomPagination",  // 定义组件名称为 BottomPagination

  // 定义组件接收的props属性
  props: {
    total: {  // 总条数，这是一个必填属性
      type: Number,
      required: true,
    },
    currentPage: {  // 当前页码，默认值为1
      type: Number,
      default: 1,
    },
    pageSize: {  // 每页显示的条数，默认值为6
      type: Number,
      default: 6,
    },
  },

  // 组件的响应式数据
  data() {
    return {
      internalCurrentPage: this.currentPage,  // 内部维护的当前页码，初始值由传入的currentPage决定
    };
  },

  // 观察props中属性值的变化，并更新内部数据
  watch: {
    currentPage(val) {
      // 当外部传入的currentPage变化时，更新内部的currentPage
      this.internalCurrentPage = val;
    },
  },

  // 组件的方法
  methods: {
    // 处理当前页变化的事件
    handleCurrentChange(val) {
      this.internalCurrentPage = val;  // 更新内部维护的当前页码
      // 触发page-change事件，将新的当前页和页面大小向外传递
      this.$emit("page-change", {pageSize: this.pageSize, currentPage: val});
    },
  },
};
</script>

<template>
<!--   监听当前页变化事件-->
<!--  绑定内部维护的当前页码-->
<!--  绑定每页显示的条数-->
<!--  绑定总条数-->
<!--  分页组件的布局-->
  <el-pagination
      @current-change="handleCurrentChange"
      :current-page="internalCurrentPage"
      :page-size="pageSize"
      :total="total"
      layout="prev, pager, next, jumper"
  ></el-pagination>
</template>